/** */

<template>
  <a-form :form="innerForm" :label-col="{ span: 2 }" :wrapper-col="{ span: 4 }">
    <FormItem2
      v-for="(field, index) in fields"
      :key="index"
      :name="field.name"
      :title="field.title"
      :controlType="field.controlType"
      :controlProps="field.controlProps"
      @onControlValueChange="handleControlValueChange"
    />
  </a-form>
</template>

<script>
import { Form } from 'ant-design-vue'
import FormItem2 from './FormItem2'

export default {
  name: 'myForm2',
  components: {
    FormItem2,
  },
  props: {
    dataset: Object,
    fields: Array,
  },
  data() {
    const datasetToken = this.dataset
      ? this.dataset.subscribe({
          onChange: this.handleDatasetChange,
        })
      : null

    const innerForm = Form.createForm(this, {
      onValuesChange: this.handleValuesChange,
    })

    return {
      datasetToken,
      innerForm,
    }
  },
  methods: {
    handleDatasetChange() {
      console.log('[function] handleDatasetChange')
      this.innerForm.setFieldsValue(this.dataset.getFieldsValue())
    },
    handleValuesChange(options, changedValues, allValues) {
      console.log('[function] FCForm.handleValuesChange')
      console.log('>>>>>', changedValues)
    },
    handleControlValueChange(name, value) {
      console.log('[function] handleControlValueChange')
      console.log('>> name:', name, value)
      this.dataset && this.dataset.setFieldsValue({ [name]: value })
    },
  },

  mounted() {
    this.innerForm.setFieldsValue(this.dataset.getFieldsValue())
  },
}
</script>

<style></style>
